<template>
  <div class="grassAI-z-textarea">
    <el-input
      type="textarea"
      placeholder="请输入内容"
      v-model="textarea"
      :autosize="{ minRows: 1, maxRows: 2 }"
      @change="handleChange"
      @input="handleInput"
      @blur="handlBlur"
      @focus="handlFocus"
    >
    </el-input>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
  },
  data() {
    return {
      textarea: this.value,
    };
  },
  watch: {
    value(val) {
      this.textarea = val;
    },
  },
  methods: {
    handleChange(val) {
      this.$emit("change", val);
    },

    handleInput(val) {
      this.$emit("input", val);
    },
    handlBlur(val) {
      this.$emit("blur", val);
    },
    handlFocus(val) {
      this.$emit("focus", val);
    },
  },
};
</script>

<style lang="scss">
.grassAI-z-textarea {
  width: 100%;
  .el-textarea__inner {
    line-height: 22px;
  }
}
</style>